<template>
  <div class="noticeDetail">
    <home-page-top/>
    <div v-if="messageInfo.id" class="info-del">
      <ul>
        <li>
          <i>分类：</i>
          <span>{{messageInfo.messageTypeName}}</span>
        </li>
        <li>
          <i>时间：</i>
          <span>{{messageInfo.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </li>
        <li>
          <i>内容：</i>
          <span class="info-del-t">{{messageInfo.messageTitle}}</span>
        </li>
        <li>
          <p>{{messageInfo.messageContent}}</p>
        </li>
      </ul>
      <button @click="$router.push('/notice/index')">返回</button>
      <button @click="removeNotice()">删除</button>
    </div>
  </div>
</template>
<script>
import HomePageTop from '@/components/home-page-top'
import * as api from '@/service/api'
export default {
  title: '用户中心-消息',
  data () {
    return {
      dataPoints: null,
      messageInfo: {}
    }
  },
  components: {
    HomePageTop
  },
  computed: {
    curId () {
      return this.$route.query.id
    }
  },
  created () {
    this.getMessageInfo()
    this.readNotice()
  },
  methods: {
    async getMessageInfo () {
      try {
        let res = await api.getMessageInfo({
          id: this.curId
        })
        this.messageInfo = res.data
      } catch (e) {
        console.log(e)
      }
    },
    async readNotice () {
      try {
        await api.readNotice({
          ids: this.curId
        })
        this.$store.dispatch('getUserInfo')
      } catch (e) {
        console.log(e)
      }
    },
    removeNotice () {
      let that = this
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">确认删除此条消息吗</div>',
        btn: '确认',
        // closeBtn: 1,
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          api.removeNotice({
            ids: that.curId
          }).then(() => {
            that.$router.push('/notice/index')
          })
          window.layer.closeAll()
        }
      })
    }
  }
}
</script>
<style lang="scss">
.noticeDetail {
  .activeTab {
    color: #f04e2d;
  }
}
</style>
